index.html

<!DOCTYPE html>
<html>
<head>
    <title>OCTANET || TASK2</title>
        <link href="todo.css" rel="stylesheet">
</head>
<body>
    <div class="contain">
        <div class="box">
                                           <h1>TO-DO-LIST</h1>
                                           <input type="text" placeholder="ADD TASK..." id="inputbox">
                                <ul id="list">
</ul>
        </div>
     </div>
 <script>
    let inputbox = document.querySelector('#inputbox');
    let list = document.querySelector('#list');
                                inputbox.addEventListener("keyup", function(event)
 {
    if (event.key === "Enter") 
        {
           addItem(this.value);
           this.value = "";            }
 })
 let addItem = (task) => {
 let listItem =                    document.createElement("li");
listItem.innerHTML = `${task} <i></i>`;
listItem.addEventListener("click", function() {
this.classList.toggle('done');
    })
listItem.querySelector("i").addEventListener("click",function(){
    listItem.remove();
})
 list.appendChild(listItem);
};
</script>                       </body>
</html>
HTMLify

Share this file:

Comments
